<template>
    <div>
        <a-card class="searchForm mb-twelve">
            <a-form-model :model="searchForm" layout="inline" :colon="false">
                <a-form-model-item label="终端名称" prop="terminalName">
                    <a-input  v-model="searchForm.terminalName" placeholder="请输入终端名称" style="width: 230px;color: #000" />
                </a-form-model-item>
                <a-form-model-item label="终端编码" prop="terminalCode">
                    <a-input v-model="searchForm.terminalCode" placeholder="请输入终端编码" style="width: 230px;color: #000" />
                </a-form-model-item>
                <a-form-model-item label="升级时间" prop="date">
                    <a-range-picker format="YYYY-MM-DD" @change="onChanges" v-model="searchForm.date" style="width: 230px;color: #000">
                        <a-icon slot="suffixIcon" type="calendar" />
                    </a-range-picker>
                </a-form-model-item>
                <a-form-model-item>
                    <a-button @click="search()" type="primary">查询</a-button>
                    <a-button @click="reset" class="btn-reset">重置</a-button>
                </a-form-model-item>
            </a-form-model>
        </a-card>
        <a-card>
            <div class="flex align-center justify-between flex-wrap card-hr">
                <div class="a-card-title">升级记录列表</div>
                <div>
                    <a-button @click="visible = true" type="danger" class="btn-danger">上传文件</a-button>
                    <a-button @click="handleOpenUpgrade" type="primary" style="margin-left: 8px;">升级</a-button>
                </div>
            </div>
            <div class="mb-sixteen pagesList">
                <a-table bordered :rowKey="(record, index) => {
                return index;
            }
                "  :columns="columns"
                    :data-source="list" :pagination="false" :scroll="{ x: '100%' }">

                </a-table>

            </div>
            <div class="text-right" v-if="total > 0">
                <a-pagination :total="total" :current="searchForm.page" :page-size.sync="searchForm.pageSize"
                    :page-size-options="$pageSizeOptions" @change="handlePageNo" @showSizeChange="showSizeChange"
                    show-size-changer />
            </div>
        </a-card>

        <a-modal title="上传文件" v-model="visible" :maskClosable="false" :width="530" :colon="false" centered :footer="null">
            <div>
                <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="{ span: 6 }"
                    :wrapper-col="{ span: 16 }">
                    <a-form-model-item label="升级包名" prop="name">
                        <a-input v-model="form.name" placeholder="请输入升级包名" />
                    </a-form-model-item>
                    <a-form-model-item label="版本" prop="version">
                        <a-input v-model="form.code" placeholder="请输入版本" />
                    </a-form-model-item>
                    <a-form-model-item label="备注" prop="remark">
                        <a-textarea v-model="form.remark" :autoSize="{ minRows: 4, maxRows: 6 }" placeholder="请输入备注" />
                    </a-form-model-item>
                    <a-form-model-item label="file" prop="file">
                        <a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76">
                            <a-button
                                style="display: flex;align-items: center;justify-content: center;background: #fff;color: #2C3360;border-color: #fff;">
                                <img src="@/assets/img/icon-upload.png"
                                    style="width: 21px;height: 16px;margin-right: 10px;" />
                                Select File
                            </a-button>
                        </a-upload>
                    </a-form-model-item>
                </a-form-model>
                <div class="flex align-center justify-center">
                    <a-button @click="visible = false"
                        style="margin-left: 8px;background: #fff;color: #2C3360;border-color: #fff;margin-right: 15px">取消</a-button>
                    <a-button @click="sumbitfile" type="primary">确定</a-button>
                </div>
            </div>
        </a-modal>

        <a-modal title="升级" v-model="upgradeVisible" :maskClosable="false" :width="530" centered :footer="null">
            <div>
                <a-form-model ref="upgradeFrom" :model="upgradeFrom" :rules="upgradeRules" :label-col="{ span: 6 }"
                    :wrapper-col="{ span: 16 }">
                    <a-form-model-item label="升级包" prop="upgradeId">
                        <a-select v-model="upgradeFrom.upgradeId" placeholder="请选择升级包" allowClear style="width:100%">
                            <a-select-option v-for="(item, index) in packageList" :value="item.id" :key="index">
                                {{ item.name }}
                            </a-select-option>
                        </a-select>
                    </a-form-model-item>
                    <a-form-model-item label="终端设备" prop="deviceIds">
                        <a-select v-model="upgradeFrom.deviceIds" placeholder="请选择终端设备" mode="multiple" allowClear style="width:100%">
                            <a-select-option v-for="(item, index) in deviceList" :value="item.id" :key="index">
                                {{ item.name }}
                            </a-select-option>
                        </a-select>
                    </a-form-model-item>
                </a-form-model>
                <div class="flex align-center justify-center">
                    <a-button @click="upgradeVisible = false"
                        style="margin-left: 8px;background: #fff;color: #2C3360;border-color: #fff;margin-right: 15px">取消</a-button>
                    <a-button @click="sumbitupgrade" type="primary">确定</a-button>
                </div>
            </div>
        </a-modal>
    </div>
</template>

<script>
import {dataSource as ds} from "@/services";

const columns = [
    {
        title: 'ID',
        dataIndex: 'id',
    },
    {
        title: '终端名称',
        dataIndex: 'terminalName',
    },
    {
        title: '终端编码',
        dataIndex: 'terminalCode',
    },
    {
        title: '地址',
        dataIndex: 'address',
    },
    {
        title: '升级时间',
        dataIndex: 'upgradeTime',
    },
    {
        title: '目前版本',
        dataIndex: 'currentVersion',
    },
]

export default {
    name: "remoteUpgrade",
    data() {
        return {
            columns,
            list: [{ id: 1, name: '名称名称' }, { id: 2 }],
            selectedRowKeys: [],
            deviceList: [],
            packageList: [],

            searchForm: {
                page: 1,
                 pageSize: 15,
                date: []
            },
            total: 20,
            visible: false,
            title: '添加终端',
            form: {
                name: '',
                version: "",
                file: ""
            },
            rules: {
                name: [
                    { required: true, message: '请输入升级包名', trigger: 'blur' },
                ],
                version: [
                    { required: true, message: '请输入版本', trigger: 'blur' },
                ],

                file: [
                    { required: true, message: '请选择上传文件', trigger: 'change' },
                ],
            },
            upgradeVisible: false,
            upgradeFrom:{
                upgradeId:undefined,
                deviceIds:[]
            },
            upgradeRules:{
                upgradeId: [
                    { required: true, message: '请选择升级包', trigger: 'change' },
                ],
                deviceIds:[
                    { required: true, message: '请选择终端设备', trigger: 'change' },
                ],
            }
        }
    },
  mounted() {
    this.getData();
    this.getPackage();
    this.getDevice();
  },
    methods: {
      //获取终端设备
      getDevice() {
        ds.terminalType({type:6}).then(res => {
          console.log(res)
          this.deviceList = res.data.data.list
        })
      },
      //获取升级包
      getPackage() {
        ds.terminalType({type:5}).then(res => {
          console.log(res)
          this.packageList = res.data.data.list
        })
      },
      getData() {
        let data=this.searchForm;
        console.log(data)
        this.list=[]
        ds.upgradeList(data).then(res => {
          console.log(res)
          this.list = res.data.data.list
          this.total = res.data.data.total
        })
      },
      onChanges(date, dateString) {
        console.log(dateString);
        this.searchForm.date=dateString;
        this.searchForm.startTime=dateString[0];
        this.searchForm.endTime=dateString[1];
      },
      //上传文件提交
      sumbitfile(){
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            ds.submitpost(this.form).then(res => {
              console.log(res);
              this.$message.success('提交成功')
              this.visible=false;
            })
          }
        })
      },
      //升级提交
      sumbitupgrade(){
        this.$refs.upgradeFrom.validate(valid => {
          if (valid) {
            ds.submitpost(this.upgradeFrom).then(res => {
              console.log(res);
              this.$message.success('提交成功')
              this.upgradeVisible=false;
            })
          }
        })
      },
      //搜索
      search(){
        this.searchForm.page=1;
        this.getData()
      },
      //重置
      reset(){
        this.searchForm={
          page: 1,
          pageSize: 15
        }
        this.getData()
      },
        handleOpenUpgrade() {
            this.upgradeVisible = true
        },
        onSelectChange(selectedRowKeys) {
            console.log('selectedRowKeys changed: ', selectedRowKeys);
            this.selectedRowKeys = selectedRowKeys;
        },
        showSizeChange(current, pageSize) {
            this.searchForm.pageSize = pageSize
          this.getData()
        },
        handlePageNo(current) {
            this.searchForm.page = current
          this.getData()
        },
    }
}
</script>
<style scoped lang="less">
.searchForm /deep/.ant-input{
  color: #000;
}
/deep/.ant-pagination-prev .ant-pagination-item-link,
.ant-pagination-next .ant-pagination-item-link {
    background-color: #42487A;
    border-color: #999da0;
    color: #898a94;
}

/deep/.ant-pagination-next .ant-pagination-item-link {
    background-color: #42487A;
    border-color: #999da0;
    color: #898a94;
}

/deep/ .ant-pagination-item {
    background-color: #42487A;
    border-color: #999da0;

}

/deep/ .ant-pagination-item a {
    color: #898a94;
}

/deep/ .ant-pagination-item-active {
    border-color: #fff;
}

/deep/ .ant-pagination-item-active a {
    color: #fff;
}

/deep/ .ant-select-selection {
    background-color: #42487A;
    border-color: #999da0;
    color: #898a94;
}

.modalcss {
    /deep/ .ant-table {
        color: #CFD2E8;
    }

    /deep/ .ant-table-thead>tr>th {
        color: #CFD2E8;
        background: #6D7090 !important;
        border-bottom: 1px solid #7D81A6;
    }

    /deep/ .ant-table-tbody>tr>td {
        background-color: #5C5F7D !important;
        border-bottom: 1px solid #7D81A6 !important;
    }

    /deep/ .ant-table-bordered .ant-table-thead>tr>th,
    /deep/ .ant-table-bordered .ant-table-tbody>tr>td {
        border-right: 1px solid #7D81A6 !important;
    }

    /deep/ .ant-table-bordered .ant-table-header>table,
    /deep/ .ant-table-bordered .ant-table-body>table,
    /deep/ .ant-table-bordered .ant-table-fixed-left table,
    /deep/ .ant-table-bordered .ant-table-fixed-right table {
        // border: 1px solid #7D81A6;
        border-color: #7D81A6;
        border-right: none;
        border-bottom: none;
    }

    //
}
</style>
